<template>
  <div class="carousel">
    <van-swipe :autoplay="5000" indicator-color="#fff">
      <van-swipe-item v-for="(img, index) in picList" :key="index" @click="onCarousel">
        <van-image class="swiper-img" fit="cover" :src="img" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { ImagePreview, Toast } from 'vant';
export default {
  name: 'Carousel',
  data () {
    return {
      id: 3,
      img_url: 'http://freeze.ganmiaoedu.com/',
      picList: [],
    }
  },
  methods: {
    onCarousel () {
      ImagePreview({
        images: this.picList, //需要预览的图片URL 数组
      });
    },
    carousel () {
      this.$axios("/api/firstpage").then(res => {
        if (res.data.code == 1) {
          this.picList = res.data.data.swiper.map(n => {
            return this.img_url.concat(n.pic_url)
          })
        } else {
          Toast.fail('网络异常请重试！');
        }
      })
    },
  },
  created () {
    this.carousel()
  },
}
</script>

<style lang="less" scoped>
.carousel {
  /deep/ .van-swipe {
    width: 95%;
    margin: 0 auto;
  }
  .swiper-img {
    width: 100%;
    height: 260px;
  }
  /deep/ .van-swipe-item {
    width: 100%;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
  }
  /deep/ .van-swipe__indicators {
    bottom: 20px;
  }
  /deep/ .van-swipe__indicator {
    border-radius: 50px;
  }
  /deep/ .van-image__img {
    border-radius: 20px;
  }
  /deep/ .van-swipe__indicator--active {
    background-color: #fff;
    width: 25px;
  }
}
</style>